<template>
  <div class="reteral-main">
    <el-card shadow="always" class="margin-30" :body-style="{ padding: '20px' }">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <!-- card body -->
      <el-form :model="orderReturnQueryVo" :rules="rules" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col :span="5" :offset="1">
            <el-form-item style="width: 100%;" label="订单编号">
              <el-input v-model="orderReturnQueryVo.orderSn" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-form-item label="订单编号">
              <el-select v-model="orderReturnQueryVo.status" style="width: 100%;" placeholder="请选择">
                <!-- 申请状态：0->待处理；1->退货中；2->已完成；3->已拒绝 -->
                <el-option
                  label="待处理"
                  :value="0"
                />
                <el-option
                  label="退货中"
                  :value="1"
                />
                <el-option
                  label="已完成"
                  :value="2"
                />
                <el-option
                  label="已拒绝"
                  :value="3"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button @click="resetMessage">重置</el-button>
              <el-button type="primary" @click="getFindReturnList">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </el-card>
    <el-card shadow="always" class="margin-30" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <template>
        <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%"
          size="mini"
          border
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
        >
          <el-table-column
            fixed="left"
            width="50"
            label="#"
            type="index"
            align="center"
          />
          <el-table-column
            prop="orderSn"
            width="180"
            label="订单编号"
            align="center"
          />
          <el-table-column
            width="100"
            label="退单状态"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==0" type="danger" effect="dark">待处理</el-tag>
              <el-tag v-else-if="scope.row.status==1" type="warning">退货中</el-tag>
              <el-tag v-else-if="scope.row.status==2" type="success">已完成</el-tag>
              <el-tag v-else-if="scope.row.status==3" type="info">已拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            width="160"
            align="center"
          />
          <el-table-column
            prop="reason"
            label="退单原因"
            width="160"
            align="center"
          />
          <el-table-column
            prop="productName"
            label="商品名称"
            width="200"
            align="center"
          />
          <el-table-column
            prop="productAttr"
            width="200"
            label="商品属性"
            align="center"
            :formatter="getProductFormatter"
          />
          <el-table-column
            prop="handleNote"
            label="商家备注"
            align="center"
          />
          <el-table-column
            prop="createTime"
            width="180"
            label="添加时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            width="180"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="goOrderMessagr(scope.row.id)">
                <i class="el-icon-view" style="margin-right: 10px;" />查看订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <div class="block">
        <el-pagination
          style="margin-top: 10px; text-align: center;"
          :current-page="start"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="limit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import mix from '@/mixins'
import { findReturnApply } from '@/api/orderReturn'

export default {
  name: 'RetreatList',
  mixins: [mix],

  data() {
    return {
      loading: false,
      list: [],
      orderReturnQueryVo: {},
      rules: {}
    }
  },
  created() {
    this.getFindReturnList()
  },

  mounted() {

  },

  methods: {
    resetMessage() {
      this.orderReturnQueryVo = this.$options.data().orderReturnQueryVo
      this.start = 1
      this.getFindReturnList()
    },

    // 路由跳转到详情页
    goOrderMessagr(id) {
      this.$router.push({ name: 'orderBackDetail', params: { id }})
    },

    // 获取订单
    async getFindReturnList() {
      try {
        // 开启进度条
        this.loading = true
        const { success, message, data: { rows, total }} = await findReturnApply(this.start, this.limit, this.orderReturnQueryVo)
        // console.log(rows)
        if (success) {
          this.list = rows
          this.total = total
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        this.$message.error('请求出错')
      } finally {
        // 关闭进度条
        this.loading = false
      }
    },
    // 过滤数据
    getProductFormatter(row) {
      const arr = JSON.parse(row.productAttr)
      const arrAsArray = Array.from(arr)
      const filterArr = arrAsArray.map(({ key, value }) => `${key}:${value}`).join(',')
      return filterArr
    },
    // 分页
    handleSizeChange(val) {
      this.limit = val
      this.start = 1
      this.getFindReturnList()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.start = val
      this.getFindReturnList()
      // console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

